<template>
	<view class="my-work-page">
		<!-- 页面头部 -->
		<view class="page-header">
			<view class="header-left" @click="goBack">
				<text class="back-icon">←</text>
				<text class="back-text">返回</text>
			</view>
			<text class="page-title">我的工作</text>
			<view class="header-right">
				<text class="refresh-btn" @click="refreshData">刷新</text>
			</view>
		</view>

		<!-- 标签页切换 -->
		<view class="tab-section">
			<view class="tab-bar">
				<view
					class="tab-item"
					:class="{ active: activeTab === 'jsa' }"
					@click="switchTab('jsa')"
				>
					<text class="tab-text">我的JSA</text>
					<view class="tab-count" v-if="jsaData.length > 0">{{ jsaData.length }}</view>
				</view>
				<view
					class="tab-item"
					:class="{ active: activeTab === 'permit' }"
					@click="switchTab('permit')"
				>
					<text class="tab-text">我的许可</text>
					<view class="tab-count" v-if="permitData.length > 0">{{ permitData.length }}</view>
				</view>
			</view>

			<!-- JSA标签页内容 -->
			<view v-if="activeTab === 'jsa'" class="tab-content">
				<!-- JSA筛选器 -->
				<view class="filter-section">
					<view class="filter-tabs">
						<view
							class="filter-tab"
							:class="{ active: jsaFilter === 'all' }"
							@click="setJsaFilter('all')"
						>
							<text class="tab-text">全部</text>
							<view class="tab-count">{{ jsaData.length }}</view>
						</view>
						<view
							class="filter-tab"
							:class="{ active: jsaFilter === 'pending' }"
							@click="setJsaFilter('pending')"
						>
							<text class="tab-text">待确认</text>
							<view class="tab-count">{{ getJsaCountByStatus('pending') }}</view>
						</view>
						<view
							class="filter-tab"
							:class="{ active: jsaFilter === 'confirmed' }"
							@click="setJsaFilter('confirmed')"
						>
							<text class="tab-text">已确认</text>
							<view class="tab-count">{{ getJsaCountByStatus('confirmed') }}</view>
						</view>
						<view
							class="filter-tab"
							:class="{ active: jsaFilter === 'draft' }"
							@click="setJsaFilter('draft')"
						>
							<text class="tab-text">草稿</text>
							<view class="tab-count">{{ getJsaCountByStatus('draft') }}</view>
						</view>
					</view>
				</view>

				<!-- JSA列表 -->
				<scroll-view class="list-scroll" scroll-y>
					<view class="list-container">
						<view
							v-for="(item, index) in filteredJsaData"
							:key="item.id"
							class="work-card"
							@click="viewJsaDetail(item)"
						>
							<!-- 卡片头部 -->
							<view class="card-header">
								<view class="header-left">
									<text class="work-number">{{ item.jsaNumber }}</text>
									<view class="status-badge" :class="getJsaStatusClass(item.status)">
										<text class="status-text">{{ getJsaStatusText(item.status) }}</text>
									</view>
								</view>
								<view class="header-right">
									<text class="create-time">{{ formatTime(item.createTime) }}</text>
								</view>
							</view>

							<!-- 卡片内容 -->
							<view class="card-content">
								<view class="content-row">
									<text class="label">作业类型：</text>
									<text class="value">{{ getWorkTypeText(item.workType) }}</text>
								</view>
								<view class="content-row">
									<text class="label">作业地点：</text>
									<text class="value">{{ item.location }}</text>
								</view>
								<view class="content-row">
									<text class="label">作业描述：</text>
									<text class="value description">{{ item.workDescription }}</text>
								</view>
							</view>

							<!-- 卡片底部 -->
							<view class="card-footer">
								<view class="work-info">
									<text class="info-text">{{ item.analysisSteps?.length || 0 }} 个作业步骤</text>
									<text class="info-text">{{ item.analyzers?.length || 0 }} 名分析人员</text>
								</view>
								<view class="action-buttons">
									<button
										class="action-btn detail-btn"
										@click.stop="viewJsaDetail(item)"
									>
										详情
									</button>
									<button
										v-if="item.status === 'draft'"
										class="action-btn edit-btn"
										@click.stop="editJsa(item)"
									>
										编辑
									</button>
									<button
										v-if="item.status === 'pending'"
										class="action-btn confirm-btn"
										@click.stop="confirmJsa(item)"
									>
										确认
									</button>
								</view>
							</view>
						</view>

						<!-- 空状态 -->
						<view v-if="filteredJsaData.length === 0" class="empty-state">
							<text class="empty-icon">📋</text>
							<text class="empty-text">暂无JSA记录</text>
							<button class="create-btn" @click="createJsa">创建JSA</button>
						</view>
					</view>
				</scroll-view>
			</view>

			<!-- 许可标签页内容 -->
			<view v-if="activeTab === 'permit'" class="tab-content">
				<!-- 许可筛选器 -->
				<view class="filter-section">
					<view class="filter-tabs">
						<view
							class="filter-tab"
							:class="{ active: permitFilter === 'all' }"
							@click="setPermitFilter('all')"
						>
							<text class="tab-text">全部</text>
							<view class="tab-count">{{ permitData.length }}</view>
						</view>
						<view
							class="filter-tab"
							:class="{ active: permitFilter === 'pending' }"
							@click="setPermitFilter('pending')"
						>
							<text class="tab-text">待审批</text>
							<view class="tab-count">{{ getPermitCountByStatus('pending') }}</view>
						</view>
						<view
							class="filter-tab"
							:class="{ active: permitFilter === 'approved' }"
							@click="setPermitFilter('approved')"
						>
							<text class="tab-text">已通过</text>
							<view class="tab-count">{{ getPermitCountByStatus('approved') }}</view>
						</view>
						<view
							class="filter-tab"
							:class="{ active: permitFilter === 'rejected' }"
							@click="setPermitFilter('rejected')"
						>
							<text class="tab-text">已拒绝</text>
							<view class="tab-count">{{ getPermitCountByStatus('rejected') }}</view>
						</view>
						<view
							class="filter-tab"
							:class="{ active: permitFilter === 'executing' }"
							@click="setPermitFilter('executing')"
						>
							<text class="tab-text">执行中</text>
							<view class="tab-count">{{ getPermitCountByStatus('executing') }}</view>
						</view>
					</view>
				</view>

				<!-- 许可列表 -->
				<scroll-view class="list-scroll" scroll-y>
					<view class="list-container">
						<view
							v-for="(item, index) in filteredPermitData"
							:key="item.id"
							class="work-card"
							@click="viewPermitDetail(item)"
						>
							<!-- 卡片头部 -->
							<view class="card-header">
								<view class="header-left">
									<text class="work-number">{{ item.permitNumber }}</text>
									<view class="status-badge" :class="getPermitStatusClass(item.status)">
										<text class="status-text">{{ getPermitStatusText(item.status) }}</text>
									</view>
								</view>
								<view class="header-right">
									<text class="apply-time">{{ formatTime(item.applyTime) }}</text>
								</view>
							</view>

							<!-- 卡片内容 -->
							<view class="card-content">
								<view class="content-row">
									<text class="label">许可类型：</text>
									<text class="value">{{ getPermitTypeText(item.permitType) }}</text>
								</view>
								<view class="content-row">
									<text class="label">作业地点：</text>
									<text class="value">{{ item.workLocation }}</text>
								</view>
								<view class="content-row">
									<text class="label">作业时间：</text>
									<text class="value">{{ formatDateTime(item.startTime) }} - {{ formatDateTime(item.endTime) }}</text>
								</view>
								<view class="content-row">
									<text class="label">申请说明：</text>
									<text class="value description">{{ item.description }}</text>
								</view>
							</view>

							<!-- 卡片底部 -->
							<view class="card-footer">
								<view class="work-info">
									<text class="info-text">JSA: {{ item.relatedJsa }}</text>
									<text class="info-text">优先级: {{ getPriorityText(item.priority) }}</text>
								</view>
								<view class="action-buttons">
									<button
										class="action-btn detail-btn"
										@click.stop="viewPermitDetail(item)"
									>
										详情
									</button>
									<button
										v-if="item.status === 'approved' && item.canExecute"
										class="action-btn execute-btn"
										@click.stop="executePermit(item)"
									>
										执行
									</button>
									<button
										v-if="item.status === 'executing'"
										class="action-btn close-btn"
										@click.stop="closePermit(item)"
									>
										关闭
									</button>
								</view>
							</view>
						</view>

						<!-- 空状态 -->
						<view v-if="filteredPermitData.length === 0" class="empty-state">
							<text class="empty-icon">📝</text>
							<text class="empty-text">暂无许可申请</text>
							<text class="empty-desc">需要先创建JSA并获得确认后才能申请许可</text>
							<button class="create-btn" @click="applyPermit">申请许可</button>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- 底部操作区 -->
		<view class="bottom-actions">
			<view class="action-row">
				<button class="primary-btn" @click="activeTab === 'jsa' ? createJsa() : applyPermit()">
					<text class="btn-icon">{{ activeTab === 'jsa' ? '📋' : '📝' }}</text>
					<text class="btn-text">{{ activeTab === 'jsa' ? '创建JSA' : '申请许可' }}</text>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeTab: 'jsa', // 默认显示JSA
				jsaFilter: 'all',
				permitFilter: 'all',
				jsaData: [
					{
						id: '1',
						jsaNumber: 'JSA20250101001',
						workType: 'equipment_maintenance',
						location: 'A区设备车间',
						creator: '张三',
						workDescription: '设备维护检修作业，包括设备清洁、润滑、零部件更换等',
						status: 'pending',
						createTime: '2025-01-15 09:30:00',
						analysisSteps: [
							{ step: '设备停机', risk: '意外启动', controlMeasure: '上锁挂牌' },
							{ step: '设备清洁', risk: '化学伤害', controlMeasure: '佩戴防护用品' }
						],
						analyzers: [
							{ name: '李四', department: '维修部' },
							{ name: '王五', department: '安全部' }
						]
					},
					{
						id: '2',
						jsaNumber: 'JSA20250101002',
						workType: 'high_altitude',
						location: 'B区高空作业平台',
						creator: '张三',
						workDescription: '高空设备安装作业，涉及高空作业平台操作',
						status: 'confirmed',
						createTime: '2025-01-14 14:20:00',
						analysisSteps: [
							{ step: '佩戴安全带', risk: '高空坠落', controlMeasure: '双钩安全带' },
							{ step: '检查平台', risk: '平台故障', controlMeasure: '定期检查' }
						],
						analyzers: [
							{ name: '孙七', department: '工程部' }
						]
					},
					{
						id: '3',
						jsaNumber: 'JSA20250101003',
						workType: 'draft',
						location: 'C区配电室',
						creator: '张三',
						workDescription: '电气设备检修作业，涉及高压电操作',
						status: 'draft',
						createTime: '2025-01-16 10:15:00',
						analysisSteps: [],
						analyzers: []
					}
				],
				permitData: [
					{
						id: '1',
						permitNumber: 'PER20250101001',
						permitType: 'hot_work',
						workLocation: 'A区设备车间',
						applicant: '张三',
						startTime: '2025-01-16 09:00:00',
						endTime: '2025-01-16 17:00:00',
						description: '设备维护需要进行动火作业，包括焊接和切割操作',
						status: 'pending',
						applyTime: '2025-01-15 16:30:00',
						relatedJsa: 'JSA20250101001',
						priority: 'high',
						canExecute: false
					},
					{
						id: '2',
						permitNumber: 'PER20250101002',
						permitType: 'high_altitude',
						workLocation: 'B区高空作业平台',
						applicant: '张三',
						startTime: '2025-01-17 08:00:00',
						endTime: '2025-01-17 16:00:00',
						description: '高空设备安装作业，需要进入高空作业区域',
						status: 'approved',
						applyTime: '2025-01-14 14:20:00',
						relatedJsa: 'JSA20250101002',
						priority: 'medium',
						canExecute: true
					},
					{
						id: '3',
						permitNumber: 'PER20250101003',
						permitType: 'electrical',
						workLocation: 'C区配电室',
						applicant: '张三',
						startTime: '2025-01-16 14:00:00',
						endTime: '2025-01-16 18:00:00',
						description: '配电柜检修作业，涉及高压电操作',
						status: 'executing',
						applyTime: '2025-01-14 10:15:00',
						relatedJsa: 'JSA20250101003',
						priority: 'high',
						canExecute: false
					}
				]
			}
		},
		computed: {
			filteredJsaData() {
				if (this.jsaFilter === 'all') {
					return this.jsaData
				}
				return this.jsaData.filter(item => item.status === this.jsaFilter)
			},
			filteredPermitData() {
				if (this.permitFilter === 'all') {
					return this.permitData
				}
				return this.permitData.filter(item => item.status === this.permitFilter)
			}
		},
		onLoad() {
			this.loadData()
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},

			refreshData() {
				this.loadData()
				uni.showToast({
					title: '刷新成功',
					icon: 'success'
				})
			},

			switchTab(tab) {
				this.activeTab = tab
			},

			setJsaFilter(filter) {
				this.jsaFilter = filter
			},

			setPermitFilter(filter) {
				this.permitFilter = filter
			},

			loadData() {
				// 这里可以调用API获取真实数据
				console.log('加载用户工作数据')
			},

			// JSA相关方法
			getJsaCountByStatus(status) {
				if (status === 'all') return this.jsaData.length
				return this.jsaData.filter(item => item.status === status).length
			},

			getJsaStatusClass(status) {
				return `status-${status}`
			},

			getJsaStatusText(status) {
				const statusMap = {
					draft: '草稿',
					pending: '待确认',
					confirmed: '已确认',
					expired: '已过期'
				}
				return statusMap[status] || status
			},

			getWorkTypeText(type) {
				const typeMap = {
					equipment_maintenance: '设备维护',
					high_altitude: '高空作业',
					electrical: '电气作业',
					chemical: '化学作业',
					hot_work: '动火作业'
				}
				return typeMap[type] || type
			},

			createJsa() {
				uni.navigateTo({
					url: '/pages/jsa/create/create'
				})
			},

			viewJsaDetail(item) {
				uni.navigateTo({
					url: `/pages/jsa/detail/detail?id=${item.id}`
				})
			},

			editJsa(item) {
				uni.navigateTo({
					url: `/pages/jsa/create/create?id=${item.id}&mode=edit`
				})
			},

			confirmJsa(item) {
				uni.showModal({
					title: '确认JSA',
					content: `确定要确认JSA ${item.jsaNumber} 吗？`,
					success: (res) => {
						if (res.confirm) {
							item.status = 'confirmed'
							uni.showToast({
								title: '确认成功',
								icon: 'success'
							})
						}
					}
				})
			},

			// 许可相关方法
			getPermitCountByStatus(status) {
				if (status === 'all') return this.permitData.length
				return this.permitData.filter(item => item.status === status).length
			},

			getPermitStatusClass(status) {
				return `status-${status}`
			},

			getPermitStatusText(status) {
				const statusMap = {
					pending: '待审批',
					approved: '已通过',
					rejected: '已拒绝',
					executing: '执行中',
					closed: '已关闭'
				}
				return statusMap[status] || status
			},

			getPermitTypeText(type) {
				const typeMap = {
					hot_work: '动火作业',
					confined_space: '受限空间',
					electrical: '电气作业',
					excavation: '开挖作业',
					high_altitude: '高空作业'
				}
				return typeMap[type] || type
			},

			getPriorityText(priority) {
				const priorityMap = {
					high: '高',
					medium: '中',
					low: '低'
				}
				return priorityMap[priority] || priority
			},

			applyPermit() {
				uni.navigateTo({
					url: '/pages/permit/apply/apply'
				})
			},

			viewPermitDetail(item) {
				uni.navigateTo({
					url: `/pages/permit/detail/detail?id=${item.id}`
				})
			},

			executePermit(item) {
				uni.showModal({
					title: '开始执行',
					content: `确定要开始执行许可 ${item.permitNumber} 吗？`,
					success: (res) => {
						if (res.confirm) {
							item.status = 'executing'
							item.canExecute = false
							uni.showToast({
								title: '开始执行',
								icon: 'success'
							})
						}
					}
				})
			},

			closePermit(item) {
				uni.showModal({
					title: '关闭许可',
					content: `确定要关闭许可 ${item.permitNumber} 吗？`,
					success: (res) => {
						if (res.confirm) {
							item.status = 'closed'
							uni.showToast({
								title: '许可已关闭',
								icon: 'success'
							})
						}
					}
				})
			},

			// 通用方法
			formatTime(time) {
				return time.split(' ')[0]
			},

			formatDateTime(time) {
				const date = new Date(time)
				const month = (date.getMonth() + 1).toString().padStart(2, '0')
				const day = date.getDate().toString().padStart(2, '0')
				const hours = date.getHours().toString().padStart(2, '0')
				const minutes = date.getMinutes().toString().padStart(2, '0')
				return `${month}-${day} ${hours}:${minutes}`
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-work-page {
		background: #f8f9fa;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.page-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		background: #fff;
		border-bottom: 1rpx solid #e4e7ed;

		.header-left {
			display: flex;
			align-items: center;

			.back-icon {
				font-size: 36rpx;
				margin-right: 10rpx;
				color: #409EFF;
			}

			.back-text {
				font-size: 28rpx;
				color: #409EFF;
			}
		}

		.page-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}

		.header-right {
			.refresh-btn {
				font-size: 28rpx;
				color: #409EFF;
			}
		}
	}

	.tab-section {
		flex: 1;
		display: flex;
		flex-direction: column;

		.tab-bar {
			display: flex;
			background: #fff;
			border-bottom: 1rpx solid #e4e7ed;

			.tab-item {
				flex: 1;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 30rpx 20rpx;
				cursor: pointer;
				transition: all 0.3s ease;

				&.active {
					border-bottom: 4rpx solid #409EFF;

					.tab-text {
						color: #409EFF;
						font-weight: bold;
					}
				}

				.tab-text {
					font-size: 28rpx;
					color: #666;
				}

				.tab-count {
					margin-left: 8rpx;
					background: #e4e7ed;
					color: #666;
					border-radius: 12rpx;
					padding: 4rpx 10rpx;
					font-size: 20rpx;
					min-width: 28rpx;
					text-align: center;
				}
			}
		}

		.tab-content {
			flex: 1;
			overflow: hidden;
		}
	}

	.filter-section {
		background: #fff;
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #e4e7ed;

		.filter-tabs {
			display: flex;
			gap: 16rpx;
			flex-wrap: wrap;

			.filter-tab {
				position: relative;
				padding: 16rpx 20rpx;
				border-radius: 24rpx;
				background: #f5f5f5;
				display: flex;
				align-items: center;
				gap: 8rpx;
				transition: all 0.3s ease;

				&.active {
					background: #409EFF;

					.tab-text {
						color: #fff;
					}

					.tab-count {
						background: rgba(255, 255, 255, 0.3);
						color: #fff;
					}
				}

				.tab-text {
					font-size: 26rpx;
					color: #666;
					font-weight: 500;
				}

				.tab-count {
					background: #e4e7ed;
					color: #666;
					border-radius: 12rpx;
					padding: 4rpx 10rpx;
					font-size: 20rpx;
					min-width: 28rpx;
					text-align: center;
				}
			}
		}
	}

	.list-scroll {
		flex: 1;
	}

	.list-container {
		padding: 20rpx;

		.work-card {
			background: #fff;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
			overflow: hidden;
			transition: all 0.3s ease;

			&:active {
				transform: scale(0.98);
			}

			.card-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 24rpx 30rpx 16rpx;
				border-bottom: 1rpx solid #f0f0f0;

				.header-left {
					display: flex;
					align-items: center;
					gap: 16rpx;

					.work-number {
						font-size: 32rpx;
						font-weight: bold;
						color: #409EFF;
					}

					.status-badge {
						padding: 8rpx 16rpx;
						border-radius: 12rpx;
						font-size: 22rpx;

						&.status-draft {
							background: #f0f0f0;
							color: #666;
						}

						&.status-pending {
							background: #fff7e6;
							color: #fa8c16;
						}

						&.status-confirmed,
						&.status-approved {
							background: #f6ffed;
							color: #52c41a;
						}

						&.status-rejected {
							background: #fff2f0;
							color: #ff4d4f;
						}

						&.status-executing {
							background: #e6f7ff;
							color: #1890ff;
						}

						.status-text {
							font-weight: 500;
						}
					}
				}

				.header-right {
					.create-time,
					.apply-time {
						font-size: 24rpx;
						color: #999;
					}
				}
			}

			.card-content {
				padding: 20rpx 30rpx;

				.content-row {
					display: flex;
					margin-bottom: 16rpx;

					&:last-child {
						margin-bottom: 0;
					}

					.label {
						font-size: 28rpx;
						color: #666;
						min-width: 160rpx;
					}

					.value {
						font-size: 28rpx;
						color: #333;
						flex: 1;

						&.description {
							line-height: 1.4;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
						}
					}
				}
			}

			.card-footer {
				padding: 20rpx 30rpx 24rpx;
				border-top: 1rpx solid #f0f0f0;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.work-info {
					display: flex;
					flex-direction: column;
					gap: 8rpx;

					.info-text {
						font-size: 24rpx;
						color: #999;
					}
				}

				.action-buttons {
					display: flex;
					gap: 12rpx;

					.action-btn {
						padding: 10rpx 20rpx;
						border-radius: 20rpx;
						font-size: 22rpx;
						border: none;

						&.detail-btn {
							background: #f0f0f0;
							color: #666;
						}

						&.edit-btn {
							background: #e6a23c;
							color: #fff;
						}

						&.confirm-btn,
						&.execute-btn {
							background: #409EFF;
							color: #fff;
						}

						&.close-btn {
							background: #f56c6c;
							color: #fff;
						}
					}
				}
			}
		}

		.empty-state {
			text-align: center;
			padding: 120rpx 0;

			.empty-icon {
				font-size: 120rpx;
				margin-bottom: 20rpx;
			}

			.empty-text {
				font-size: 32rpx;
				color: #666;
				margin-bottom: 16rpx;
			}

			.empty-desc {
				font-size: 26rpx;
				color: #999;
				margin-bottom: 40rpx;
			}

			.create-btn {
				background: #409EFF;
				color: #fff;
				border: none;
				padding: 20rpx 40rpx;
				border-radius: 24rpx;
				font-size: 28rpx;
			}
		}
	}

	.bottom-actions {
		background: #fff;
		border-top: 1rpx solid #e4e7ed;
		padding: 20rpx 30rpx;

		.action-row {
			.primary-btn {
				width: 100%;
				background: linear-gradient(135deg, #409EFF, #5cadff);
				color: #fff;
				border: none;
				padding: 24rpx 40rpx;
				border-radius: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 12rpx;
				font-size: 32rpx;
				font-weight: 600;
				box-shadow: 0 4rpx 16rpx rgba(64, 158, 255, 0.3);

				.btn-icon {
					font-size: 36rpx;
				}
			}
		}
	}
</style>
